<template>
  <div class='rescue first-box'>
    <div class="tab-box">
      <Tab :listData="tabData" :selected="selectedIndex" :className="{padding50:true}"></Tab>
    </div>
    <Map :type="selectedIndex" ></Map>
  </div>
</template>
<script>
import Tab from '../../common/tab'
import Map from './map'
export default {
  components: {Tab,Map},
  name: "",
  data() {
    return {
      tabData:[
        {
          name:"加油站",
          click:this.changeTab,
          type:0,
        },{
          name:"停车场",
          click:this.changeTab,
          type:1,
        },{
          name:"充电桩",
          click:this.changeTab,
          type:2,
        },
      ],
      selectedIndex:0,
    };
  },
  methods: {
    changeTab(item){
      this.selectedIndex=item.type
      console.log("click---tab--change")
    },
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.rescue {
  background-color: #fff;
  .tab-box{
    background-color: #f2f2f2;
    padding-bottom: 1px;
  }
}
.padding50{
  padding-left: 50px;
  padding-right: 50px;
}
</style>